<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>

  <style type="text/css">
    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    #map {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>

<div id="map"></div>

<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyDgF_xU8tLp-GwUUlKWa8iTSqOhN1ff7Mg"></script>
<script type="text/javascript" src="../../js/mapv.js"></script>

<script type="text/javascript">
  // Specify features and elements to define styles.
  var styleArray = [
    {
      featureType: "all",
      stylers: [
        { saturation: -80 }
      ]
    },{
      featureType: "road.arterial",
      elementType: "geometry",
      stylers: [
        { hue: "#00ffee" },
        { saturation: 50 }
      ]
    },{
      featureType: "poi.business",
      elementType: "labels",
      stylers: [
        { visibility: "off" }
      ]
    }
  ];


  // Create a map object and specify the DOM element for display.
  var map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(39.3, -95.8),
    scrollwheel: false,
    zoom: 4
  });

  var resolutionScale = window.devicePixelRatio || 1;

  var randomCount = 200;
  var data = [];
  while (randomCount--) {
    data.push({
      geometry: {
        type: 'Point',
        coordinates: [-125.8 + Math.random() * 50, 30.3 + Math.random() * 20]
      },
      count: 30 * Math.random()
    });
  }

  var dataSet = new mapv.DataSet(data);

  var options = {
    fillStyle: 'rgba(255, 50, 50, 0.5)',
    maxSize: 80,
    styles: styleArray,
    draw: 'bubble'
  }

  var mapvLayer = new mapv.googleMapLayer(map, dataSet, options);

</script>

</body>
</html>
